<template>
  <div class="bgff p20">
    <el-date-picker
      v-model="date"
      type="daterange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>
    <el-button class="mb20" size="medium" type="primary" @click="search">搜索</el-button>
    <el-button class="mb20" size="medium" type="primary" @click="outExcel">导出报表</el-button>
    <el-table
      :data="tableData"
      v-loading="loading"
      row-key="id"
      border
      style="width: 100%;margin-top:20px;"
      empty-text="暂无数据"
    >
      <el-table-column
        type="index"
        width="50"
        :index="(index)=>{return (index+1) + (curPage - 1) * size }"
        label="序号"
      ></el-table-column>
      <el-table-column prop="username" label="发送人"></el-table-column>
      <el-table-column prop="text" label="发送内容" min-width="400"></el-table-column>
      <el-table-column prop="phone" label="接收号码"></el-table-column>
      <el-table-column prop="create_at" label="发送时间">
        <template slot-scope="scope">{{new Date(scope.row.create_at).format('yyyy-MM-dd hh:mm:ss')}}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt20"
      @current-change="handlePage"
      @size-change="handleSizeChange"
      :current-page.sync="curPage"
      :page-size="size"
      :page-sizes="[5,10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { _smsList, _excelData } from "@/http/ajax";
export default {
  data() {
    return {
      pickerOptions:{
        disabledDate: (time) => {
            return time.getTime() > Date.now()
          }
      },
      cur_this: this,
      loading: false,
      tableData: [],
      curPage: 1,
      size: 10,
      total: 0,
      date: [new Date(new Date().setDate(new Date().getDate() - 30)),new Date()]
    };
  },
  created() {
    console.log()
    this.getList();
  },
  methods: {
    search(){
      if(this.date){
        this.getList();
      }else{
        this.$message({
          message: "请选择时间范围",
          type: "error"
        });
      }
    },
    // 获取banner列表
    getList() {
      this.loading = true;
      this.tableData = [];  
      let data = {
        page: this.curPage - 1,
        size: this.size,
        uid: sessionStorage.level
          ? sessionStorage.level == 1
            ? null
            : sessionStorage.uid
          : null,
        sort: "id,desc",
        type: "notice",
        startTime: this.date[0]?new Date(this.date[0]).format('yyyy-MM-dd'):'', 
        endTime: this.date[1]?new Date(this.date[1]).format('yyyy-MM-dd'):""
      };
      _smsList(
        data,
        res => {
          this.total = res.totalElements;
          this.tableData = res.content;
          this.loading = false;
        },
        err => {
          this.loading = false;
        }
      );
    },
    outExcel() {
       if(this.date){
        _excelData(
          { startTime: new Date(this.date[0]).format('yyyy-MM-dd'), endTime: new Date(this.date[1]).format('yyyy-MM-dd') },
          res => { this.excel(res.data)},
          err => {}
        );
      }else{
        this.$message({
          message: "请选择时间范围",
          type: "error"
        });
      }
    },
    //数据导出
	    excel(data){
	    let html =  '<tr  style="font-size:18px;font-weight:900;text-align:center">'+  
                      '<td>编号</td>'+
                      '<td>接收号码</td>'+
                      '<td>发送内容</td>'+
                      '<td>发送时间</td>'+
                      '<td>发送人</td>'+
                      '<td>消息类型</td>'+
                  '</tr>'
        for(let i=0;i<data.length;i++){
            html  +='<tr  style="font-size:14px;text-align:center">'+
              '<td>'+i+'</td>'+ 
              '<td>'+data[i].phone+'</td>'+ 
              '<td>'+data[i].text+'</td>'+ 
              '<td>'+new Date(data[i].create_at).format('yyyy-MM-dd hh:mm:ss')+'</td>'+
              '<td>'+data[i].username+'</td>'+ 
              '<td>通知</td>'+
          '</tr>'
        }
        let table = document.createElement('table');
        document.body.appendChild(table)
        table.style.display='none';
        // table.style.borderCollapse='collapse';
        table.innerHTML = html;
        window.method5(table);
	    },
    // 切换页码
    handlePage(val) {
      this.curPage = val;
      this.getList();
    },
    // 切换条数
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
